<template>
    <div style="padding-top: 56px;">

        <v-overlay :value="loading">
            <v-progress-circular indeterminate size="64"></v-progress-circular>
        </v-overlay>

        <div class="text-center gray--text pt-2" v-if="list.length==0">暂无消息，请输入chatid</div>
        <v-list two-line v-else @scroll="scrollEvent">
            <template v-for="(item, index) in list">
                <v-subheader v-if="item.header" inset>
                    {{ item.header }}
                </v-subheader>

                <v-divider v-else-if="item.divider" :key="index" inset></v-divider>

                <v-list-item v-else :key="item.title" ripple>
                    <v-list-item-avatar>
                        <!-- <img :src="item.avatar"> -->
                        <v-avatar :color="item.color">
                            <span class="white--text headline">{{item.name}}</span>
                        </v-avatar>
                    </v-list-item-avatar>
                    <v-list-item-content>
                        <v-list-item-title v-html="item.name" :style="`color:${item.color}`"> </v-list-item-title>

                        <v-list-item-subtitle v-html="item.mes" style="white-space: normal;" v-if="item.mes!='图片信息'"></v-list-item-subtitle>

                        <v-list-item-subtitle v-html="item.mes" style="white-space: normal;" v-else></v-list-item-subtitle>

                        <v-img :src="item.img" class="grey lighten-2" @click="openImg(item.img)">
                            <template v-slot:placeholder>
                                <v-row class="fill-height ma-0" align="center" justify="center">
                                    <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                                </v-row>
                            </template>
                        </v-img>
                        <!-- <transition> <img :src="item.img" alt=""></transition> -->
                        <v-list-item-subtitle style="color: #b1b1b1;white-space: normal;">{{$getToday(item.date * 1000, 'yyyy-mm-dd hh:mm:ss')}}</v-list-item-subtitle>
                    </v-list-item-content>
                </v-list-item>
            </template>
        </v-list>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
                colors: ['#1abc9c', '#2ecc71', '#9b59b6', '#f1c40f', '#e67e22', '#e74c3c', '#f39c12', '#0D47A1', '#82B1FF', '#448AFF', '#2979FF', '#2962FF'],
                sameList: [],
                loading: false,
                title: '',
                page: 1,
                chatid: ''
            }
        },
        watch: {
            list(newV, oldV) {
                this.$emit('listLength', newV.length)
            },
            title(newV, oldV) {
                this.$emit('title', newV)
            },
            page(newV, oldV) {
                this.$emit('page', newV)
            }
        },
        mounted() {
            window.onscroll = () => {
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
                if (scrollTop + windowHeight + 50 >= scrollHeight) {
                    console.log("到了底部");
                    if (!this.loading) {
                        this.page++
                        this.getList(this.chatid, this.page)
                    }

                }
            }
            if(this.$route.query.chatid){
                this.getList(this.$route.query.chatid, 1)
            }

        },
        methods: {
            scrollEvent(e) {
                console.log(e)
                if (
                    e.currentTarget.scrollTop + e.currentTarget.clientHeight >=
                    e.currentTarget.scrollHeight
                ) {
                    // 业务逻辑...
                }
            },
            getList(chatid, page) {
                this.chatid = chatid
                this.page = page
                this.loading = true
                this.$forceUpdate()
                this.$api.getList({
                    chatid, //"-451162841"
                    page
                }).then(res => {
                    this.loading = false
                    this.list = this.list.concat(res.payload)
                    this.title = res.title
                    this.$forceUpdate()
                    this.fixList()
                    // console.log(this.list)
                }).catch(err => {
                    this.loading = false
                    this.list = []
                })
            },
            openImg(img) {

                window.location.href = img
            },
            fixList() {
                this.list.forEach(item => {
                    if (this.sameList.some(sameitem => {
                            return sameitem.userid == item.userid
                        })) {
                        this.sameList.forEach(item2 => {
                            if (item2.userid == item.userid) {
                                item.color = item2.color
                            }
                        })

                    } else {
                        let currentColor = this.colors[Math.floor(Math.random() * 11)]
                        this.sameList.push({
                            userid: item.userid,
                            color: currentColor
                        })
                        item.color = currentColor
                    }
                })
                this.$forceUpdate()
                this.getImg()
            },
            getImg() {
                this.list.forEach(item => {
                    if (item.mes == "图片信息") {
                        this.$api.getImg(item.fileid).then(res => {
                            // console.log(res)
                            item.img = res.text
                            this.$forceUpdate()
                        })
                    }
                })
                this.$previewRefresh()
            }
        },

    }
</script>